<template>
  <div>
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <div  v-loading="loading" :data="orderSettingList" id="div1" :class="data.isSelected ? 'is-selected' : ''"  @click="click(data)">
          {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
          <div v-if="pccjson[data.day]">已预约:
            <a>{{pccjson[data.day].number}}</a>
            预约上限:
            <a>{{pccjson[data.day].reservations}}</a>
          </div>
          <div v-if="!pccjson[data.day]">
            暂无数据
          </div>
        </div>
      </template>
    </el-calendar>

    <!--预约上线计数器-->

    <el-dialog  :title="title" :visible.sync="open" append-to-body width="300px">
        <el-input-number  v-model="form.reservations" controls-position="right"  :min="1"></el-input-number>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 认</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderSetting, listOrderSetting, updateOrderSetting, addOrderSetting} from "@/api/reserve/ordersetting";
export default {
  name: 'index',
  data() {
    return{
      pccjson: {},
      // 是否弹出设置预约上线计数器
      open: false,
      // 弹出层标题
      title: "",
      // 总条数
      total: 0,

      num:1,
      // 参数
      form: {
        reservations: 1
      },
      // 查询参数
      queryParams: {
        orderDate: undefined,
        number: undefined,
        reservations: undefined
      },
      loading : true,
      // 预约设置表格数据
      orderSettingList: [],
      orderDate: '',
      flag: false
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询预约设置列表
    getList() {
      this.loading = true;
      listOrderSetting(this.queryParams).then(response => {
        const json = {} // 把日历格式转换成json 对象
        // 格式为
        // {
        //   '2022-03-13': {
        //     number: 1,
        //       reservations: 1
        //   }
        // }
        // 因为界面也有个日期 比如2022-03-13 如果匹配到这个JSON的key 就说明有值  如果匹配不到就是暂无数据
        response.forEach((item) => {
          json[item.orderDate] = item;
        })
        this.pccjson = json
        this.orderSettingList = response;
        console.log(response)
        this.loading = false;
      })

    },
    click(data) {
      console.log(data);
      const orderDate = data.day  //  保持点击的日期
      debugger
      this.orderDate = orderDate
      console.log(orderDate)
      getOrderSetting(orderDate).then(response => {
        this.open = true;
        this.title = "设置预约上限"
        if (response.data && response.data.reservations) {
          this.flag = true // 说明这个地方一定是有值的
          this.form.reservations = response.data.reservations
        } else  {
          this.form.reservations = 1
          this.flag = false
        }

      })



    },

    // 提交按钮
    submitForm: function() {
      console.log(this.form);
      const pccdata = this.orderDate
      const json = {
        orderDate: pccdata,
        ...this.form
      }
      debugger
      if (this.flag) {
        updateOrderSetting(json).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        })
      } else  {
        addOrderSetting(json).then(response => {
          this.$modal.msgSuccess("设置成功");
          this.open = false;
          this.getList();
        })
      }



    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

  }
}


</script>

<style scoped>
#div1 {
  weight:100%;
  height:100%;
}
</style>




<!--<template>-->
<!--  <div>-->
<!--    <el-card class="_calendar">-->
<!--      <el-container>-->
<!--        <el-main>-->
<!--          <el-card>-->
<!--            <el-calendar v-model="value" :first-day-of-week="7">-->
<!--              &lt;!&ndash; 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法&ndash;&gt;-->
<!--              <template slot="dateCell" slot-scope="{date, data}">-->
<!--                <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">-->
<!--                  <p :class="data.isSelected ? 'is-selected' : ''">-->
<!--                    {{ data.day.split('-').slice(1).join('-') }}-->
<!--                    <i-->
<!--                      :class="[data.isSelected ?'el-icon-check':'']"-->
<!--                    ></i>-->
<!--                    <i v-if="_.indexOf(isArrange, data.day)>0" class="el-icon-s-claim"></i>-->
<!--                    &lt;!&ndash; <i class="el-icon-coffee-cup"></i> &ndash;&gt;-->
<!--                  </p>-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-calendar>-->
<!--          </el-card>-->
<!--        </el-main>-->

<!--        <el-aside width="40%" style="overflow: hidden;">-->
<!--          <el-card>-->
<!--            <div class="el-calendar__header">-->
<!--              <div class="el-calendar__title">排班详情</div>-->
<!--              <div class="el-calendar__button-group">-->
<!--                <div class="el-button-group">-->
<!--                  <button-->
<!--                    type="button"-->
<!--                    class="el-button el-button&#45;&#45;plain el-button&#45;&#45;mini"-->
<!--                    @click="saveOnClick"-->
<!--                  >-->
<!--                    <span>新增</span>-->
<!--                  </button>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="calendar-info">-->
<!--              <div style="padding: 15px;">-->
<!--                <div role="alert" class="el-alert el-alert&#45;&#45;success is-dark" @click="infoOnClick">-->
<!--                  <i class="el-alert__icon el-icon-success is-big"></i>-->
<!--                  <div class="el-alert__content">-->
<!--                    <span class="el-alert__title is-bold">2020-06-19 9:00~11:00</span>-->
<!--                    <p class="el-alert__description">值班人员：张三、李四、王五</p>-->
<!--                    <p class="el-alert__description">携带设备：123547、985431、745481</p>-->
<!--                    <i class="el-alert__closebtn el-icon-close" @click.stop="infoDel"></i>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div role="alert" class="el-alert el-alert&#45;&#45;info is-dark" @click="infoOnClick">-->
<!--                  <i class="el-alert__icon el-icon-info is-big"></i>-->
<!--                  <div class="el-alert__content">-->
<!--                    <span class="el-alert__title is-bold">2020-06-19 9:00~11:00（待审核）</span>-->
<!--                    <p class="el-alert__description">值班人员：张三、李四、王五</p>-->
<!--                    <p class="el-alert__description">携带设备：123547、985431、745481</p>-->
<!--                    <i class="el-alert__closebtn el-icon-close"></i>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div role="alert" class="el-alert el-alert&#45;&#45;warning is-dark" @click="infoOnClick">-->
<!--                  <i class="el-alert__icon el-icon-warning is-big"></i>-->
<!--                  <div class="el-alert__content">-->
<!--                    <span class="el-alert__title is-bold">警告提示的文案</span>-->
<!--                    <p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p>-->
<!--                    <i class="el-alert__closebtn el-icon-close"></i>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div role="alert" class="el-alert el-alert&#45;&#45;error is-dark" @click="infoOnClick">-->
<!--                  <i class="el-alert__icon el-icon-error is-big"></i>-->
<!--                  <div class="el-alert__content">-->
<!--                    <span class="el-alert__title is-bold">错误提示的文案</span>-->
<!--                    <p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p>-->
<!--                    <i class="el-alert__closebtn el-icon-close"></i>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-aside>-->
<!--      </el-container>-->
<!--    </el-card>-->
<!--    <calendarDrawer ref="calendarDrawer"></calendarDrawer>-->
<!--    <calendarForm ref="calendarForm"></calendarForm>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--import calendarDrawer from "./calendar-drawer.vue";-->
<!--import calendarForm from "./calendar-form.vue";-->
<!--export default {-->
<!--  components: { calendarDrawer, calendarForm },-->
<!--  data: function() {-->
<!--    return {-->
<!--      value: new Date(),-->
<!--      isArrange: [-->
<!--        "2020-06-08",-->
<!--        "2020-06-09",-->
<!--        "2020-06-10",-->
<!--        "2020-06-11",-->
<!--        "2020-06-17",-->
<!--        "2020-06-18"-->
<!--      ]-->
<!--    };-->
<!--  },-->
<!--  created: function() {-->
<!--    this.$nextTick(() => {-->
<!--      // 点击前一个月-->
<!--      let prevBtn = document.querySelector(-->
<!--        ".el-calendar__button-group .el-button-group>button:nth-child(1)"-->
<!--      );-->
<!--      prevBtn.addEventListener("click", e => {-->
<!--        console.log(this.data);-->
<!--        this.$notify({-->
<!--          title: "上一月",-->
<!--          message: "上个月头天：" + this.value,-->
<!--          type: "success",-->
<!--          position: "top-left"-->
<!--        });-->
<!--      });-->

<!--      //点击下一个月-->
<!--      let nextBtn = document.querySelector(-->
<!--        ".el-calendar__button-group .el-button-group>button:nth-child(3)"-->
<!--      );-->
<!--      nextBtn.addEventListener("click", () => {-->
<!--        console.log(this.value);-->
<!--        this.$notify({-->
<!--          title: "下一月",-->
<!--          message: "下个月头天：" + this.value,-->
<!--          type: "warning",-->
<!--          position: "top-left"-->
<!--        });-->
<!--      });-->

<!--      //点击今天-->
<!--      let todayBtn = document.querySelector(-->
<!--        ".el-calendar__button-group .el-button-group>button:nth-child(2)"-->
<!--      );-->
<!--      todayBtn.addEventListener("click", () => {-->
<!--        this.$notify.info({-->
<!--          title: "今天",-->
<!--          message: "今天：" + this.value,-->
<!--          position: "top-left"-->
<!--        });-->
<!--      });-->
<!--    });-->
<!--  },-->
<!--  mounted: function() {},-->
<!--  methods: {-->
<!--    //点击日期块-->
<!--    calendarOnClick(e) {-->
<!--      console.log(e);-->
<!--      // this.isArrange.push("2020-06-19");-->
<!--      this.$notify.error({-->
<!--        title: "日历块点击",-->
<!--        message: e,-->
<!--        position: "top-left"-->
<!--      });-->
<!--    },-->
<!--    //点击信息块-->
<!--    infoOnClick() {-->
<!--      this.$refs.calendarDrawer.drawer = true;-->
<!--    },-->
<!--    //新增排班-->
<!--    saveOnClick() {-->
<!--      this.$refs.calendarForm.dialogFormVisible = true;-->
<!--    },-->
<!--    //删除排班-->
<!--    infoDel() {-->
<!--      this.$confirm("此操作将永久删除该排班, 是否继续?", "提示", {-->
<!--        confirmButtonText: "确定",-->
<!--        cancelButtonText: "取消",-->
<!--        type: "warning"-->
<!--      })-->
<!--        .then(() => {-->
<!--          this.$message({-->
<!--            type: "success",-->
<!--            message: "删除成功!"-->
<!--          });-->
<!--        })-->
<!--        .catch(() => {-->
<!--          this.$message({-->
<!--            type: "info",-->
<!--            message: "已取消删除"-->
<!--          });-->
<!--        });-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->
<!--<style scoped>-->
<!--.is-selected {-->
<!--  color: #1989fa;-->
<!--}-->
<!--.p-popover {-->
<!--  text-align: center;-->
<!--}-->
<!--._calendar {-->
<!--  height: 99.5%;-->
<!--  width: 100%;-->
<!--}-->
<!--.el-main {-->
<!--  padding: 0px;-->
<!--  overflow: hidden;-->
<!--}-->
<!--.calendar-info {-->
<!--  height: 94%;-->
<!--  overflow: auto;-->
<!--}-->
<!--.el-alert {-->
<!--  margin: 15px 0px;-->
<!--}-->
<!--.el-alert:hover {-->
<!--  transform: scale(1.02);-->
<!--}-->
<!--.el-alert:active {-->
<!--  transform: scale(1.01);-->
<!--}-->
<!--</style>-->
<!--<style>-->
<!--._calendar .div-Calendar {-->
<!--  height: 125px;-->
<!--  box-sizing: border-box;-->
<!--  padding: 8px;-->
<!--}-->
<!--._calendar .el-calendar-table .el-calendar-day {-->
<!--  padding: 0px;-->
<!--  height: 125px;-->
<!--}-->
<!--._calendar .el-container,-->
<!--._calendar .el-calendar {-->
<!--  height: 100%;-->
<!--}-->
<!--._calendar .el-card__body {-->
<!--  padding: 0px;-->
<!--}-->

<!--</style>-->


